<template>
  <div class='wrapper'>

      <div class='chart' id='chart'></div>

    
  </div>
</template>
 
<script>
  import axios from 'axios'
  import echarts from 'echarts'
  import XLSX from 'xlsx'
  import transformSheets from '../scripts/read_xlsx.js'
  export default {
    name:"worldmap",
    data() {
      return {
        data_confirm:[],
        all_data:[],
        namemap:[],
        dataArr:[]
      };
    },
    props:{
      msg:{
        type:Object,
        default:() => {}
      }
    },
    watch:{
      msg:{
        deep: true,
        handler(val) {
          this.getWorld(val)
        }
      }
    },
    mounted () {
      this.getWorld(this.msg)
    },
    methods: {
      getWorld (data) {
        // let namemap
        // let dataArr
          // axios.get('../../static/data/world_data.csv',{responseType:'arraybuffer'}).then(response => {
          //   var data = new Uint8Array(response.data) 
          //   var wb = XLSX.read(data,{type:"array"})
          //   var sheet1 = wb.Sheets
          //   var content = transformSheets(sheet1)
          //   delete content[0]
          //   // console.log(content)
          //   for(var i=1;i<content.length;i++)
          
          //   {
          //     var confirm = new Object()
          //     // var element = content[i] 
          //     confirm.name = content[i][0]
          //     confirm.value = content[i][1]
          //     _this.data_confirm[i-1]=confirm
          //     confirm.heal = content[i][2]
          //     confirm.dead = content[i][3]
          //     _this.all_data[i-1]=confirm

          //   }
          //   // console.log(this.all_data)
          // })
          // .catch(err=>{
          //   console.log(err)
          // })
          var _this= this
        axios.get('../../static/data/world_data.json').then(async  res => {
          _this.namemap = res.data.namemap
          console.log(this.namemap)
          _this.dataArr = res.data.dataArr
          // console.log(this.dataArr)
          // let dataArr = data.data
          _this.drawChart(_this.namemap, _this.dataArr)
        })
        .catch(err => {
          console.log(err)
        })
        
        
        
      },
      test(){
        console.log(this.namemap)
      },
      // async myFunction() {
      //  await getWorld() 
      // //  console.log(x)
      // //  const y = await ajax2()
      //  //等待两个异步ajax请求同时执行完毕后打印出数据
      //  console.log("dasf")
      //  console.log(this.namemap) 
      // },
      created() {
        this.myFunction()
      },
      drawChart (name, data) {
        // 基于准备好的dom，初始化echarts实例
        let chart = echarts.init(document.getElementById('chart'))
        // 监听屏幕变化自动缩放图表
        window.addEventListener('resize', function () {
          chart.resize()
        })
        // 绘制图表
        chart.setOption({
          // 图表主标题
          title: {
            text: '世界疫情分布', // 主标题文本，支持使用 \n 换行
            top: 10, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
            left: 'center', // 值: 'left', 'center', 'right' 同上
            textStyle: { // 文本样式
              fontSize: 24,
              fontWeight: 600,
              color: '#000'
            }
          },
          grid: {
            width:'100%',
            height:'100%',
              left: '0%',
              right: '0%',
              bottom: '0%',
              containLabel: true
          },
          // 提示框组件
          tooltip: {
            trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
            // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
            // 使用函数模板  传入的数据值 -> value: number | Array
            formatter: function (val) {
              if(val.data == null) return ;
              return val.data.name + ': ' + val.data.value
            }
          },
          // 视觉映射组件
          visualMap: {
            min: 0,
            max: 28835216,
            text:['max','min'],
            realtime: false,
            calculable: true,
            color: ["#1f307b", "#bcc5ee"],
          },
          series: [
            {
              type: 'map', // 类型
              // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
              name: '世界地图',
              mapType: 'world', // 地图类型
              // 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
              roam: true,
              // 图形上的文本标签
              label: {
                show: false // 是否显示对应地名
              },
              zoom: 1.2,
              // 地图区域的多边形 图形样式
              itemStyle: {
                // areaColor: '#7B68EE', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
                borderWidth: 0.5, // 描边线宽 为 0 时无描边
                borderColor: '#rgba(0, 0, 0, 0.2)', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
                borderType: 'solid' // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
              },
              // 高亮状态下的多边形和标签样式
              emphasis: {
                label: {
                  show: true, // 是否显示标签
                  fontSize: "10",
                  color: 'rgba(0,0,0,0.7)' // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
                },
                itemStyle: {
                  areaColor: '#f2d5ad' // 地图区域的颜色
                }
              },
              // 自定义地区的名称映射
              nameMap: name,
              // 地图系列中的数据内容数组 数组项可以为单个数值
              data: data
            }
          ]
        })
      }
    }
  }
</script>
<style scoped>
  .wrapper {
    width: 100%;
  }
  .wrapper .chart {
    width: 80%;
    margin:0 auto;
    height: 600px;
    border: 1px solid #eeeeee;
    /* background: url(../../public/static/bg.png) no-repeat; 背景图设置*/ 
    background-size: 100% 100%;
  }
</style>